Example
আপনার নিজস্ব Vue সার্ভার পান
উপরের সমস্ত শর্তগুলি 'মিথ্যা' হলে একটি <div> উপাদান তৈরি করতে v-else নির্দেশিকা ব্যবহার করে।
<p v-if="word === 'apple'">The word is 'apple'.</p>
<p v-else-if="word === 'pizza'">The word is 'pizza'</p>
<div v-else>
<img src="/img_question.svg" alt="question mark">
<p>The word is not 'apple', and it is not 'pizza'</p>
</div>নীচে আরো উদাহরণ দেখুন.
Definition and Usage
v-else নির্দেশিকাটি if স্টেটমেন্টে ব্যবহার করা হয় একটি উপাদান ফেরত দেওয়ার জন্য যদি উপরের সমস্ত শর্তগুলি 'false' তে মূল্যায়ন করা হয়।
v-else নির্দেশিকা শুধুমাত্র v-if বা v-else-if ধারণকারী একটি উপাদানের পরে ব্যবহার করা যেতে পারে।
v-else নির্দেশিকা একটি অভিব্যক্তি ছাড়া ব্যবহার করা হয়.
যখন v-else একটি উপাদান পরিবর্তন করে:
- আপনি বিল্ট-ইন <Transition> উপাদানটি ব্যবহার করতে পারেন যখন উপাদানটি প্রবেশ করে এবং DOM ছেড়ে চলে যায়।
- লাইফসাইকেল হুক যেমন 'মাউন্ট করা' এবং 'আনমাউন্ট করা' ট্রিগার করা হবে।
Directives for Conditional Rendering
এই ওভারভিউ বর্ণনা করে যে কিভাবে শর্তসাপেক্ষ রেন্ডারিংয়ের জন্য ব্যবহৃত বিভিন্ন Vue নির্দেশাবলী একসাথে ব্যবহার করা হয়।
| Directive | বিস্তারিত |
|---|---|
| v-if | একা ব্যবহার করা যেতে পারে, অথবা v-else-if এবং/অথবা v-else এর সাথে। যদি v-if-এর ভিতরের শর্তটি 'সত্য' হয়, তাহলে v-else-if বা v-else বিবেচনা করা হবে না। |
| v-else-if | v-if বা অন্য v-else-if এর পরে ব্যবহার করতে হবে। যদি v-else-if-এর ভিতরের শর্তটি 'true' হয়, তাহলে পরবর্তী v-else-if বা v-else বিবেচনা করা হয় না। |
| v-else | যদি ইফ-স্টেটমেন্টের প্রথম অংশটি মিথ্যা হয় তবে এই অংশটি কার্যকর হবে। if-স্টেটমেন্টের একেবারে শেষে v-if এবং v-else-if-এর পরে স্থাপন করা উচিত। |
More Examples
Example 1
টাইপরাইটারের সংখ্যা 0 হলে "স্টক নেই" লিখতে v-else ব্যবহার করে।
<p v-if="typewriterCount>3">
In stock
</p>
<p v-else-if="typewriterCount>0">
Very few left!
</p>
<p v-else>
Not in stock
</p>Example 2
একটি নির্দিষ্ট পাঠ্য প্রদর্শন করতে v-else ব্যবহার করে যখন বাক্যটিতে 'পিৎজা' বা 'বুরিটো' থাকে না।
<div id="app">
<div v-if="text.includes('pizza')">
<p>The text includes the word 'pizza'</p>
<img src="img_pizza.svg">
</div>
<div v-else-if="text.includes('burrito')">
<p>The text includes the word 'burrito', but not 'pizza'</p>
<img src="img_burrito.svg">
</div>
<p v-else>The words 'pizza' or 'burrito' are not found in the text</p>
</div>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
const app = Vue.createApp({
data() {
return {
text: 'I like Thai beef salad, pho soup and tagine.'
}
}
})
app.mount('#app')
</script>Exercise
প্রশিক্ষণ:
Vue.js v-else directive ?